<template>
	<!-- hover变色小块组件，样式内容由父级提供{hover:{inner:{},outer:{}}} -->
	<div 
		class="patch" 
		:style="[patch.styles, flag?patch.hover.inner:patch.hover.outer]" 
		@mouseover="inner($event)" 
		@mouseout="outer($event)" 
		>
		<slot></slot>
	</div>
</template>

<script>
export default{
	data(){
		return{
			flag: false
		}
	},
	props:{
		patch:{
			type: Object,
			default: () => ({
				hover: {
					inner: {
						backgroundColor: '#f4f4f4',
						color: '#fff'
					},
					outer: {
						backgroundColor: 'rgba(0,0,0,0)',
						color: '#999',
					}
				}
			})
		}
	},
	methods:{
		inner(target){
			if(this.flag) return;
			this.flag = true;
			this.$emit('inner', target)
		},
		outer(target){
			if(!this.flag) return;
			this.flag = false;
			this.$emit('outer', target)
		}
	}
}
</script>

<style lang="less" scoped>
.patch {
	width: 100%;
	height: 100%;
	cursor: pointer;
	transition: background-color .3s;
	transition-delay: .1s;
	background-color: #f4f4f4;
	box-sizing: border-box;
	z-index: 10;
}
</style>
